<div class="modal-content">

    <div class="modal-header">
        创建<span style="color: red; font-size: 300%">{{ cate_display }}</span>订单
    </div>

    <div class="modal-body clearfix">
        <div class="col-md-12 form-group">
            <div class=col-md-12>
                <label>需求类型</label>
                <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>
                <div class="btn-group demand_type_group" data-toggle="buttons">
                    {% for choice in demand_type_choice %}
                        <label class="btn btn-warning btn-sm {% if choice[0]==default_value['type'] %}active{% endif %}" for="demandTypeOption{{loop.index}}">
                            <input type="radio" name="demand_type" value="{{choice[0]}}" id="demandTypeOption{{loop.index}}" autocomplete="off" {% if choice[0]==default_value['type'] %}checked{% endif %}>{{choice[1]}}
                        </label>
                    {% endfor %}
                </div>
            </div>
        </div>

        <div class="col-md-6 form-group">
            <div class=col-md-12>
                <label>使用场地</label>
                <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>
                <div class="btn-group demand_surr_group" data-toggle="buttons">
                    {% for choice in demand_surr_choice %}
                        <label class="btn btn-warning btn-sm {% if choice[0]==default_value['surr'] %}active{% endif %}" for="demandSurrOption{{loop.index}}">
                            <input type="radio" name="demand_surr" value="{{choice[0]}}" id="demandSurrOption{{loop.index}}" autocomplete="off" {% if choice[0]==default_value['surr'] %}checked{% endif %}>{{choice[1]}}
                        </label>
                    {% endfor %}
                </div>
            </div>
        </div>

        <div class="col-md-6 form-group">
            <div class=col-md-12>
                <label>颜色</label>
                <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>
                <div class="btn-group demand_color_group" data-toggle="buttons">
                    {% for choice in demand_color_choice %}
                        <label class="btn btn-warning btn-sm {% if choice[0]==default_value['color'] %}active{% endif %}" for="demandColorOption{{loop.index}}">
                            <input type="radio" name="demand_color" value="{{choice[0]}}" id="demandColorOption{{loop.index}}" autocomplete="off" {% if choice[0]==default_value['color'] %}checked{% endif %}>{{choice[1]}}
                        </label>
                    {% endfor %}
                </div>
            </div>
        </div>

        <!-- 故障类型 -->
        {% if cate==2 %}
        <div class="col-md-12 form-group">
            <div class=col-md-12>
                <label>故障类型</label>
                <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>
                <div class="btn-group demand_malf_group" data-toggle="buttons">
                    {% for choice in demand_malf_choice %}
                        <label class="btn btn-warning btn-sm {% if choice[0]==default_value['malf'] %}active{% endif %}" for="demandMalfOption{{loop.index}}">
                            <input type="radio" name="demand_malf" value="{{choice[0]}}" id="demandMalfOption{{loop.index}}" autocomplete="off" {% if choice[0]==default_value['malf'] %}checked{% endif %}>{{choice[1]}}
                        </label>
                    {% endfor %}
                </div>
            </div>
        </div>
        {% endif %}

        <div class="col-md-3 form-group">
            <div class=col-md-12>
                <label>间距</label>
                <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>
                <input type="text" class="form-control" id="demand_span" value="{{ default_value['span'] }}">
            </div>
        </div>

        <div class="col-md-3 form-group">
            <div class=col-md-12>
                <label>面积</label>
                <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>
                <div class="input-group">
                    <input type="text" class="form-control" id="demand_size" value="{{ default_value['size'] }}">
                    <div class="input-group-addon">平米</div>
                </div>
            </div>
        </div>

        <div class="col-md-3 form-group">
            <div class=col-md-12>
                <label>预算</label>
                <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>
                <div class="input-group">
                    <input type="text" class="form-control" id="demand_budget" value="{{ default_value['budget'] }}">
                    <div class="input-group-addon">元</div>
                </div>
            </div>
        </div>

        <div class="col-md-12 form-group">
            <div class=col-md-9>
                <label>关联录音</label>
                <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>
                {% for i in demand_audio_choice %}
                    <label class="control-label">
                        <input id="demand_id{{loop.index}}" name="demand_audio" type="radio" value="{{i[0]}}">
                        {% if i[0]==0  or i[0]==-1 %}
                            {{i[1]}}
                        {% else %}
                            <audio src="{{ i[1] }}" controls="controls">
                                您的浏览器无法播放该音频。
                            </audio>
                            录音日期：{{ i[2]}}
                        {% endif %}
                    </label>
                    <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>
                {% endfor %}

            </div>
            <div class=col-md-3>
                <div class="btn-group" data-toggle="buttons">
                    <label class="btn btn-default active" for="demandAudioSensitiveOption0">
                        <input type="radio" name="demand_audio_sensitive" value="0" id="demandAudioSensitiveOption0" autocomplete="off" checked>公开
                    </label>
                    <label class="btn btn-default" for="demandAudioSensitiveOption1">
                        <input type="radio" name="demand_audio_sensitive" value="1" id="demandAudioSensitiveOption1" autocomplete="off">隐私
                    </label>
                </div>
            </div>
        </div>

        <div class="col-md-6 form-group">
            <div class=col-md-12>
                <label>客户要求</label>
                <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>
                <textarea class="form-control" id="demand_remark"></textarea>
            </div>
        </div>

        <div class="col-md-6 form-group">
            <div class=col-md-12>
                <label>内部备注</label>
                <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>
                <textarea class="form-control" id="demand_admin_remark"></textarea>
            </div>
        </div>

    </div>

    <div class="modal-footer">
        <!-- 按钮组 -->
        <div class="col-md-12 form-group">
            <div class="col-md-3">
                <button class="btn btn-default btn-block" data-dismiss="modal" aria-label="Close" id="goto_demand_type_modal">上一步</button>
            </div>
            <div class="col-md-3">
                <button class="btn btn-success btn-block" data-dismiss="modal" aria-label="Close" id="publish_demand">发布订单</button>
            </div>
            <div class="col-md-3">
                <button class="btn btn-danger btn-block" data-dismiss="modal" aria-label="Close" id="giveup_demand">放弃订单</button>
            </div>
            <div class="col-md-3">
                <button class="btn btn-default btn-block" data-dismiss="modal" aria-label="Close" id="publish_delay">延后发布</button>
            </div>
        </div>
    </div>

</div>

<script type="text/javascript">
    function add_active_label(obj_id) {
        var tag_label = $('label[for="' + obj_id + '"]');
        tag_label.addClass("active");
    }
    function remove_active_label(obj_id) {
        var tag_label = $('label[for="' + obj_id + '"]');
        tag_label.removeClass("active");
    }
    var tmp_cate = demand_info.cate;
    // 选择屏幕类型后，相关参数联动
    $('input:radio[name="demand_type"]').unbind();
    $('input:radio[name="demand_type"]').change(function(){
        if(tmp_cate == 1 || tmp_cate == 2) {
            if (tmp_cate == 2){
                $('input:radio[name="demand_malf"]').each(function () {
                    if (this.value == "1") {
                        this.checked = true;
                        add_active_label(this.id);
                    } else {
                        remove_active_label(this.id);
                    }
                });
            }
            if (this.value == "1") {
                $('input:radio[name="demand_surr"]').each(function () {
                    if (this.value == "3") {
                        this.checked = true;
                        add_active_label(this.id);
                    } else {
                        remove_active_label(this.id);
                    }
                });
                $('input:radio[name="demand_color"]').each(function () {
                    if (this.value == "1") {
                        this.checked = true;
                        add_active_label(this.id);
                    } else {
                        remove_active_label(this.id);
                    }
                });
                $("#demand_span").val("P10");
                if (tmp_cate == 2){
                    $('input:radio[name="demand_malf"]').each(function () {
                        if (this.value == "4") {
                            this.checked = true;
                            add_active_label(this.id);
                        } else {
                            remove_active_label(this.id);
                        }
                    });
                }
            } else if (this.value == "2") {
                $('input:radio[name="demand_surr"]').each(function () {
                    if (this.value == "1") {
                        this.checked = true;
                        add_active_label(this.id);
                    } else {
                        remove_active_label(this.id);
                    }
                });
                $('input:radio[name="demand_color"]').each(function () {
                    if (this.value == "3") {
                        this.checked = true;
                        add_active_label(this.id);
                    } else {
                        remove_active_label(this.id);
                    }
                });
                $("#demand_span").val("P8");
            } else if (this.value == "3") {
                $('input:radio[name="demand_surr"]').each(function () {
                    if (this.value == "1") {
                        this.checked = true;
                        add_active_label(this.id);
                    } else {
                        remove_active_label(this.id);
                    }
                });
                $('input:radio[name="demand_color"]').each(function () {
                    if (this.value == "3") {
                        this.checked = true;
                        add_active_label(this.id);
                    } else {
                        remove_active_label(this.id);
                    }
                });
                $("#demand_span").val("P10");
            } else if (this.value == "4") {
                $('input:radio[name="demand_surr"]').each(function () {
                    if (this.value == "2") {
                        this.checked = true;
                        add_active_label(this.id);
                    } else {
                        remove_active_label(this.id);
                    }
                });
                $('input:radio[name="demand_color"]').each(function () {
                    if (this.value == "3") {
                        this.checked = true;
                        add_active_label(this.id);
                    } else {
                        remove_active_label(this.id);
                    }
                });
                $("#demand_span").val("P4");
            } else if (this.value == "5") {
                $('input:radio[name="demand_surr"]').each(function () {
                    if (this.value == "2") {
                        this.checked = true;
                        add_active_label(this.id);
                    } else {
                        remove_active_label(this.id);
                    }
                });
                $('input:radio[name="demand_color"]').each(function () {
                    if (this.value == "3") {
                        this.checked = true;
                        add_active_label(this.id);
                    } else {
                        remove_active_label(this.id);
                    }
                });
                $("#demand_span").val("P2");
            } else {
                $('input:radio[name="demand_surr"]').each(function () {
                    if (this.value == "1") {
                        this.checked = true;
                        add_active_label(this.id);
                    } else {
                        remove_active_label(this.id);
                    }
                });
                $('input:radio[name="demand_color"]').each(function () {
                    if (this.value == "3") {
                        this.checked = true;
                        add_active_label(this.id);
                    } else {
                        remove_active_label(this.id);
                    }
                });
                $("#demand_span").val("P10");
            }
        }else {
            $('input:radio[name="demand_color"]').each(function () {
                if (this.value == "3") {
                    this.checked = true;
                    add_active_label(this.id);
                } else {
                    remove_active_label(this.id);
                }
            });
            if (this.value == "1") {
                $('input:radio[name="demand_surr"]').each(function () {
                    if (this.value == "2") {
                        this.checked = true;
                        add_active_label(this.id);
                    } else {
                        remove_active_label(this.id);
                    }
                });

                $("#demand_span").val("P3");
            } else if (this.value == "2") {
                $('input:radio[name="demand_surr"]').each(function () {
                    if (this.value == "1") {
                        this.checked = true;
                        add_active_label(this.id);
                    } else {
                        remove_active_label(this.id);
                    }
                });
                $("#demand_span").val("P4");
            } else if (this.value == "3") {
                $('input:radio[name="demand_surr"]').each(function () {
                    if (this.value == "2") {
                        this.checked = true;
                        add_active_label(this.id);
                    } else {
                        remove_active_label(this.id);
                    }
                });
                $("#demand_span").val("P3");
            } else if (this.value == "4") {
                $('input:radio[name="demand_surr"]').each(function () {
                    if (this.value == "2") {
                        this.checked = true;
                        add_active_label(this.id);
                    } else {
                        remove_active_label(this.id);
                    }
                });
                $("#demand_span").val("P2");
            } else{
                $('input:radio[name="demand_surr"]').each(function () {
                    if (this.value == "2") {
                        this.checked = true;
                        add_active_label(this.id);
                    } else {
                        remove_active_label(this.id);
                    }
                });
                $("#demand_span").val("P3");
            }
        }
    });

    // 上一步按钮触发事件
    function goto_demand_type_modal_event() {
        sync_demand_info();
        show_demand_type_modal();
    }
    $('#goto_demand_type_modal').click(function (){
        goto_demand_type_modal_event();
    });

    // 放弃订单钮触发事件
    $('#abandon_confirm').click(function () {
        if ($('#abandon_text').val() == ''){
            alert('原因不能为空!');
            return false;
        }
        $.ajax({
            type: "POST",
            contentType: "application/json",
            url: "{{ url_for('sever_moor_bp.ajax_abandon_demand') }}",
            data: JSON.stringify({
                'draft_demand_id': demand_info.draft_demand_id,
                'uid': demand_info.uid,
                'abandon_text': $('#abandon_text').val()
            })
        });
        console.log('放弃订单');
        init_global_variable();
        phone.setBusy(false, 0);
        alert('操作成功');
{#        getRecords();#}
        $('.inp1').val("");
{#        location.reload();#}
    });
    $('#giveup_demand').click(function (){
        $('#abandon-modal').modal({backdrop: "static", keyboard: false});
    });
    $('#abandon_goto_customer_modal').click(function (){
        show_demand_modal();
    });

    // 发布订单钮触发事件
    function publish_demand_event() {
        // 提交项目信息
        sync_demand_info();
        set_demand_status_dispatching();
        submit_demand_info();
        init_global_variable();
        phone.setBusy(false, 0);
        alert('发布成功');
{#        getRecords();#}
        $('.inp1').val("");
{#        location.reload();#}
    }

    function validate_demand_info_required() {
        if ($('input[name=demand_type]:checked').val() === undefined ||
            $('input[name=demand_surr]:checked').val() === undefined ||
            $('input[name=demand_color]:checked').val() === undefined){
            alert('需求类型等信息不可为空');
            return false;
        }
        if ($('#demand_size').val() <= 0){
            alert('面积必须大于0');
            return false;
        }
        if (demand_info.cate == 2 && $('input[name=demand_malf]:checked').val() === undefined){
            alert('维修订单必须选择一个故障类型');
            return false
        }
        if ($('#demand_budget').val() === ''){
            alert('预算不能为空, 若无预算, 请填0');
            return false
        }
        if ($('#demand_span').val() === ''){
            alert('间距不能为空');
            return false
        }
        return true;
    }

    $('#publish_demand').click(function (){
        if (validate_demand_info_required()) {
            publish_demand_event()
        }else {
            return false
        }
    });

    // 延后发布钮触发事件
    function publish_delay_event() {
        // 提交项目信息
        sync_demand_info();
        set_demand_status_delay();
        submit_demand_info();
        init_global_variable();
        phone.setBusy(false, 0);
        alert('操作成功');
{#        getRecords();#}
        $('.inp1').val("");
{#        location.reload();#}
    }
    $('#publish_delay').click(function (){
        if (validate_demand_info_required()) {
            publish_delay_event();
        }else {
            return false
        }
    });

</script>
